﻿<%@ Page Title="All Recipes" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="AllRecipes.aspx.cs" Inherits="AllRecipes" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
<%--    <script type="text/javascript" src="js/jquery-ui.js"></script>--%>
<link rel="stylesheet" type="text/css" href="css/toggles.css"/>
<link rel="stylesheet" type="text/css" href="css/toggles-light.css"/>
<script type="text/javascript" src="js/toggles.js"></script>

<script>
    var paging = '<%=ConfigurationManager.AppSettings["paging"].ToString() %>';
    var pageIndex = 1;
    var pageCount;
    var data;
    $(window).scroll(function () {
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {
            GetRecords();
        }
    });
    
    function GetRecords() {
        pageIndex++;
        if (pageIndex >= 2) {
            $("#loader").show();
            $.ajax({
                type: "POST",
                url: "PIMService.asmx/GetRecipeUserPaging",
                data: "{'UserId':'0','page_no':'" + pageIndex + "','page_lenght':'" + paging + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    BindRecipes(response,'true');
                },
                error: function (msg) {
                    //alert('Connect to database is break. Please check connection info!'); 
                }
            });
        }
    }


</script>

<script>
    function loadRecipes() {
        document.getElementById("cMealPlan").value = '0';
        document.getElementById("cGrocery").value = '0';
        document.getElementById("<%=GroceryRecipe.ClientID %>").value = '';
        $.ajax({
            type: "POST",
            url: "PIMService.asmx/GetRecipeUserPaging",
            data: "{'UserId':'0','page_no':'1','page_lenght':'" + paging + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                BindRecipes(response, true);
                data = response;
            },
            error: function (msg) {
                //alert('Connect to database is break. Please check connection info!'); 
            }
        });

    }

    function AddToMyRecipe(RecipeId, UserId, OldUser) {
        //$("#" + RecipeId).remove();
        $.ajax({
            type: "POST",
            url: "PIMService.asmx/InsertMyRecipe",
            data: "{'_recipeId':'" + RecipeId + "','_userId':'" + UserId + "','_oldUser':'" + OldUser + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                result = response.d;
                //CreateNutrition(UserId, RecipeId);
                $('#dgFavorite').dialog('open');
            },
            error: function (msg) {
            }
        });


    }

    function SearchRecipe() {
        //alert($("#inPutSearch").val());
        if ($("#inPutSearch").val() != '') {
            $.ajax({
                type: "POST",
                url: "PIMService.asmx/GetRecipeUserByName",
                data: "{'RecipeName':'" + $("#inPutSearch").val() + "','UserId':'0'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    BindRecipes(response, false);
                },
                error: function (msg) {
                    //alert('Connect to database is break. Please check connection info!'); 
                }
            });
        } else {
            BindRecipes(data,false);
        
        }
        return false;
    }

    function AddMyMyRecipe(RecipeId) {

        $("#gallery li#" + RecipeId).remove();
        var count = parseInt(document.getElementById("cGrocery").value, 10) + 1;
        var appendCount = ''
        if (count > 1)
            var appendCount = count.toString() + '<br/>Recipes';

        else
            var appendCount = count.toString() + '<br/>Recipe';
        
        
        if(document.getElementById("<%=isActive.ClientID %>").value == 'true') {
            $("#mealPlanCounter").show();
            $('#countMealPlan').html(appendCount);
        }else {
            $("#groceryCounter").show();
            $('#countGrocery').html(appendCount);
        }
        document.getElementById("cGrocery").value = count.toString();
        document.getElementById("<%=GroceryRecipe.ClientID %>").value += "," + RecipeId;
    }
    function AddMyMealPlan(RecipeId, UserId, OldUser) {
        $("#gallery li#" + RecipeId).remove();
        $("#mealPlanCounter").show();
        var count = parseInt(document.getElementById("cMealPlan").value, 10) + 1;
        //var count = parseInt(hdMealPlan,10) + 1;
        if(count > 1)
            $('#countMealPlan').html(count.toString() + '<br/>recipes');
        else
            $('#countMealPlan').html(count.toString() + '<br/>recipe');
        document.getElementById("cMealPlan").value = count.toString();
        document.getElementById("<%=MealPlanRecipe.ClientID %>").value += "," + RecipeId;
    }

    function GetRecipeForGrocery() {
        document.getElementById("<%=GroceryRecipe.ClientID %>").value = document.getElementById("HdGrocery").value;
    }


    function BindRecipes(response, check) {
        var userid = '<%=Session["Userid"]%>';
        var recipe = response.d;
        //alert(recipe);
        var html = "";
        for (var i = 0; i < recipe.length; i++) {
            var varObjectID = recipe[i].RecipeID;
            var OldUser = recipe[i].UserID;
            var varObjectName;
            var varObjectNameFull;
            if (recipe[i].RecipeName != null) {
                varObjectName = recipe[i].RecipeName.substring(0, 10);

                varObjectNameFull = recipe[i].RecipeName;
                if (varObjectNameFull.length > 10) varObjectName = varObjectName + ' ..';
            }
            else {
                varObjectName = 'No Name..';
                varObjectNameFull = 'No Name';
            }
            var varObjectImage = recipe[i].RecipeImage;
            var varUserName = recipe[i].UserName;
            var rating = recipe[i].RecipeRating;
            var serving = recipe[i].Serving;
            rating = "'" + rating + "'";

            if (varObjectImage != null) {
                html += '<li id="' + varObjectID + '"  >'
                html += '<img class="image-recipe" src="../' + varObjectImage + '" onclick="ViewRecipeFullView(' + varObjectID + ')">';
                if (userid != '') {
                    html += '<div class="iconFavorite" onclick="javascript:AddToMyRecipe(' + varObjectID + ',' + userid + ',' + OldUser + ')">'
                    html += '<img class="imgIcon" src="images/icon-favorite.png"/>'
                    html += '</div>'
                }
                html += '<div class="iconAdd" onclick="javascript:AddMyMyRecipe(' + varObjectID + ')">'
                html += '<img class="imgIcon"  src="images/icon-add.png"/>'
                html += '</div>'
                html += '<div class="recipeName"><p style="padding:3px 0">' + varObjectNameFull + '</p></div>'
                html += '</li>'
            }
        }
        if (check)
            $('#gallery').append(html);
        else
            $('#gallery').html(html);
        $("#loader").hide();
    
    }


    function BindRecipe(response, check) {
        var userid = '<%=Session["Userid"]%>';
        var recipe = response.d;
        //alert(recipe);
        var html = "";
        for (var i = 0; i < recipe.length; i++) {
            var varObjectID = recipe[i].RecipeID;
            var OldUser = recipe[i].UserID;
            var varObjectName;
            var varObjectNameFull;
            if (recipe[i].RecipeName != null) {
                varObjectName = recipe[i].RecipeName.substring(0, 10);

                varObjectNameFull = recipe[i].RecipeName;
                if (varObjectNameFull.length > 10) varObjectName = varObjectName + ' ..';
            }
            else {
                varObjectName = 'No Name..';
                varObjectNameFull = 'No Name';
            }
            var varObjectImage = recipe[i].RecipeImage;
            var varUserName = recipe[i].UserName;
            var rating = recipe[i].RecipeRating;
            var serving = recipe[i].Serving;
            rating = "'" + rating + "'";

            if (varObjectImage != null) {
                html += '<li id="' + varObjectID + '" class="ui-widget-content ui-corner-tr form-row-image" >'
                html += '<a id="' + varObjectID + ' " class="none-decoration" href="NewRecipe.aspx?RecipeId=' + varObjectID + '">' + varObjectName + '</a>';
                html += '<img id="imgRecipe" class="tooltip li-recipe-image"  serving="' + 1000 + '" src="data:image/jpeg;charset=utf-8;base64,' + varObjectImage + '" onclick="ViewRecipeFullView(' + varObjectID + ')">';
                if (userid != '') {
                    html += '<a onclick="javascript:AddMyMealPlan(' + varObjectID + ')" title="Add to meal plan" class="ui-icon ui-icon-star" style="float:left"></a>';

                }
                html += '<a onclick="javascript:AddMyMyRecipe(' + varObjectID +')" title="Add to grocery" class="ui-icon ui-icon-plus" style="float:right"></a>';
                html += '</li>'
            }
        }
        if(check)
            $('#gallery').append(html);
        else
            $('#gallery').html(html);
        $("#loader").hide();
    }
    function BindSuggestion() {
        $.ajax({
            type: "POST",
            url: "PIMService.asmx/GetRecipeUser",
            data: "{'UserId':'0'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                var availableTags = '';
                var object = response.d;
                for (var i = 0; i < object.length; i++) {
                    var varObjectNameFull;
                    varObjectNameFull = object[i].RecipeName;
                    var Sugges = varObjectNameFull;
                    availableTags += Sugges + ",";
                }
                availableTags = availableTags.substring(0, availableTags.length - 1);

                var suggestion = availableTags.split(',');

                $(".suggest").autocomplete({
                    source: suggestion
                });
            }
        });
    }

    function ViewRecipeFullView(recipeToView) {
        self.location = "NewRecipe.aspx?RecipeId=" + recipeToView + "";
    }

    function searchKeyPress() {
        if ($('#inPutSearch').val().length > 0) {
            $('#btnDelete').show();
        } else {
            $('#btnDelete').hide();
        }
    }

    function deleteTextSearch() {
        $('#inPutSearch').val('');
    }

    function InitToogle() {
        $('.toggle').each(function () {
            $(this).toggles({
                clickable: !$(this).hasClass('noclick'),
                dragable: !$(this).hasClass('nodrag'),
                click: ($(this).attr('rel')) ? $('.' + $(this).attr('rel')) : undefined,
                on: !$(this).hasClass('off'),
                checkbox: ($(this).data('checkbox')) ? $('.' + $(this).data('checkbox')) : undefined,
                ontext: $(this).data('ontext') || 'YES',
                offtext: $(this).data('offtext') || 'NO'
            });
            $('.toggle').toggles({ on: false });
            //$('.toggle').toggles({ width: 50 });
        });
        document.getElementById("<%=isActive.ClientID %>").value = 'false';
    }
    function eventToogle() {
        $('.toggle').on('toggle', function (e, active) {
            if (active) {
                //Active MealPlan
                document.getElementById("<%=isActive.ClientID %>").value = 'true';
                if (document.getElementById("<%=GroceryRecipe.ClientID %>").value != '') {

                    if (confirm('That grocery will not be saved.')) {
                        $('.toggle').toggles({ on: true });
                        $('#gallery').html('');
                        $("#groceryCounter").hide();
                        $("#mealPlanCounter").hide();
                        loadRecipes();
                        pageIndex = 1;

                    } else {
                        $('.toggle').toggles({ on: false });
                        document.getElementById("<%=isActive.ClientID %>").value = 'false';
                    }

                }
                return false;
            } else {
                //Active Grocery
                document.getElementById("<%=isActive.ClientID %>").value = 'false';
                if (document.getElementById("<%=GroceryRecipe.ClientID %>").value != '') {
                    if (confirm('That meal plan will not be saved.')) {
                        $('.toggle').toggles({ on: false });
                        $('#gallery').html('');
                        $("#groceryCounter").hide();
                        $("#mealPlanCounter").hide();
                        loadRecipes();
                        pageIndex = 1;

                    } else {
                        $('.toggle').toggles({ on: true });
                        document.getElementById("<%=isActive.ClientID %>").value = 'true';

                    }

                }
                return false;
            }
        });
    }
    $(document).ready(function () {
        document.getElementById("HdGrocery").value = '';
        document.getElementById("<%=MealPlanRecipe.ClientID %>").value = '';
        if ('<%=Session["Userid"]%>' != '') {
            InitToogle();
            eventToogle();
            //            $('.toggle').toggles({ click: false });
        } else {
            document.getElementById("<%=isActive.ClientID %>").value = 'false';
        }
        loadRecipes();
        BindSuggestion();

        $("#dgFavorite").dialog({
            resizable: false,
            width: 270,
            modal: true,
            autoOpen: false,
            show: {
                effect: "blind",
                duration: 100
            },
            hide: {
                effect: "blind",
                duration: 100
            },
            buttons: {
                "Yes": function () {
                    $(this).dialog("close");
                    //window.location = "Logout.aspx";
                }
            }
        });


    });
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<div class="searchBox" >
    <div class="bgsearch">
    <div class="pd-input">
        <input id="inPutSearch" class="suggest input-search" type="text" name="txtSearchkey" placeholder="Search" onkeyup="searchKeyPress();" size="30"   autocomplete="on"  value="">
        <input id="btnSearch" class="btn-search" type="button" onclick="return SearchRecipe();">
        <input id="btnDelete"  class="btn-delete" onclick="deleteTextSearch(); return false;"  type="button"  >
        </div>
        </div>
</div>

<div style="clear:both;"></div>
<section id="bg_content">

    <div style="clear:both;"></div>
	<div class="box01 clearfix" style="text-align:center;">
        <div class="box02">
            <ul class="ulbox">
                <li style="width:20%" >
                        <asp:ImageButton ID="imgMealPlan" runat="server" 
                        src="images/icon02.png" CssClass="imgIcon1" Visible="false" OnClick="imgMealPlan_Click" />
                        <div id="mealPlanCounter" class="form-count1">
                            <div class="arrow-up"></div>
                            <div class="count-css"  >
                                <label id="countMealPlan"></label>
                            </div>      
                        </div>  
                </li >
                    <li class="toggle-light" style=" height:30px; margin-top:10px ;width:60%;">
                        <div class="toggle" style="margin: 0 auto;"></div>
                    </li>
              <li class="li01" style="width:20%" >
                        <asp:ImageButton ID="imgGrocery" 
                      runat="server" src="images/icon03.png" 
                      CssClass="imgIcon1 float_right" OnClick="imgGrocery_Click1" 
                       />
                      <div id="groceryCounter" class="form-count">
                          <div class="arrow-up"></div>
                          <div class="count-css" >
                            <label id="countGrocery"></label>
                        </div>  
                    </div> 
              </li>
              <div style="clear:both;"></div>
          </ul>
          
        </div>
    </div>
<%--    <div class="toggle-light" style="margin-top:10px">
                        <div class="toggle" ></div>
    </div>--%>
    <div class="clearfix clear">
    	<ul id="gallery" class="ulimg">

        </ul>
    </div>
    <div id="loader" style="display:none; text-align:center;" >
        <img src="images/load.gif"/>
    </div>
    <%--<div id="load" class="load">
        <img src="images/load.gif"/>
    </div>--%>
</section>
<input type="hidden" id="cMealPlan"/>
<input type="hidden" id="cGrocery"/>
<asp:HiddenField id="GroceryRecipe" runat="server"/>
<asp:HiddenField id="MealPlanRecipe" runat="server"/>
<input type="hidden" id="HdGrocery"/>
<asp:HiddenField id="isActive" runat="server"/>
    <div id="dgFavorite" class="message-diaglog">
        <p>
            Add to favorite success .</p>
    </div>
</asp:Content>

